import { defineConfig, ConfigEnv, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// 注意：所有vite插件请移步至 https://github.com/vitejs/awesome-vite#plugins 寻找！
import legacy from '@vitejs/plugin-legacy'
import viteSvgIcons from 'vite-plugin-svg-icons'
import removeConsole from 'vite-plugin-remove-console'
import viteCompression from 'vite-plugin-compression'
// 该插件在中国不容易安装，请在电脑的host文件中进行配置 199.232.4.133 raw.githubusercontent.com （路径：c:\windows\system32\drivers\etc）
import viteImagemin from 'vite-plugin-imagemin'

/*
  https://vitejs.dev/config/
  在Vite的API中，开发环境下 command 的值为serve，而在生产环境下为build
*/
export default defineConfig(({ command, mode }: ConfigEnv) => {
  // console.log('--command值在开发环境为serve，在生产环境为build--', command)
  // console.log('--该项目中dev用于开发，prod用于构建--', mode)
  // const envObj = loadEnv(mode, process.cwd())
  // console.log('--env环境变量中的自定义内容--', envObj)
  return {
    plugins: [
      vue(),
      legacy({ targets: ['defaults', 'not IE 11'] }),
      // 删除console.log的vite插件
      { ...removeConsole(), apply: 'build' },
      // 使用svg图标
      viteSvgIcons({
        iconDirs: [resolve(__dirname, 'src/assets/svg')],
        symbolId: 'icon-[dir]-[name]'
      }),
      // 使用gzip或brotli压缩资源（对大于100Kb的文件进行压缩）
      { ...viteCompression({ threshold: 102400, ext: '.gz' }), apply: 'build' },
      // 使用图片压缩插件
      {
        ...viteImagemin({
          gifsicle: {
            optimizationLevel: 7,
            interlaced: false
          },
          optipng: {
            optimizationLevel: 7
          },
          mozjpeg: {
            quality: 20
          },
          pngquant: {
            quality: [0.8, 0.9],
            speed: 4
          },
          svgo: {
            plugins: [
              {
                name: 'removeViewBox'
              },
              {
                name: 'removeEmptyAttrs',
                active: false
              }
            ]
          }
        }),
        apply: 'build'
      }
    ],
    server: {
      host: '0.0.0.0', // 指定服务器IP地址
      port: 9999, // 指定服务器端口
      open: false, // 在服务器启动时自动在浏览器中打开应用程序
      strictPort: false, // 设为 false 时，若端口已被占用则会尝试下一个可用端口,而不是直接退出
      https: false // 是否开启 https
      // proxy: {
      //   // 选项写法
      //   '/api': {
      //     target: 'http://jsonplaceholder.typicode.com',
      //     changeOrigin: true,
      //     ws: true,
      //     rewrite: path => path.replace(/^\/api/, '')
      //   }
      // }
    },
    resolve: {
      // 起别名
      alias: {
        '@': resolve(__dirname, 'src'),
        '@imgs': resolve(__dirname, 'src/assets/imgs'),
        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' // 解决vue-i18n控制台警告问题
      }
    },
    css: {
      postcss: {
        // 解决报错 warning: "@charset" must be the first rule in the file
        plugins: [
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: atRule => {
                if (atRule.name === 'charset') {
                  atRule.remove()
                }
              }
            }
          }
        ]
      },
      preprocessorOptions: {
        // 全局配置sass
        scss: {
          additionalData: '@import "@/assets/style/index.scss";'
        }
      }
    },
    // 构建选项
    build: {
      cssCodeSplit: true, // false表示禁用CSS代码分割，将所有css 抽取到一个文件中（默认为true）
      brotliSize: true, // 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能（默认为true）
      chunkSizeWarningLimit: 1024 * 5, // chunk 大小警告的限（以 kbs 为单位）（默认为500）
      // 打包pinia的配置项(将pinia的全局库实例打包进vendor，避免和页面一起打包造成资源重复引入)
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes(resolve(__dirname, '/src/stores/index.ts'))) {
              return 'vendor'
            }
          }
        }
      },
      reportCompressedSize: true // 启用/禁用gzip压缩大小报告(默认为true)。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能
    }
  }
})
